import React from 'react'
import '../css/count.css'
import { connect } from 'react-redux'
import { plusAction, miusAction } from '../redux/action'

class Count extends React.Component {
    constructor(props) {
        super(props)
        // this.state = {
        //     count: 1
        // }
    }

    render() {
        return (
            <div className="count_box">
                <button onClick={()=> {
                    // this.state.count++;
                    // this.setState({
                    //     count: this.state.count
                    // })
                    this.props.plus(plusAction())
                }}>+</button>
                <div>{this.props.count}</div>
                <button onClick={()=> {
                    // this.state.count--;
                    // if(this.state.count < 1) {
                    //     this.state.count = 1;
                    // }
                    // this.setState({
                    //     count: this.state.count
                    // })
                    this.props.mius(miusAction())
                }}>-</button>
            </div>
        )
    }
}

function mapStateToProps(rooterReducer) {
    return {
        count: rooterReducer.countReducer.count
    }
}

function mapActionToProps(dispatch) {
    return {
        plus: (action)=> {dispatch(action)},
        mius: (action)=> {dispatch(action)}
    }
}

export default connect(mapStateToProps, mapActionToProps)(Count)